<template>
  <div class="inquiry-container">
    <div class="inquiry-title">
      院校库
    </div>
      <HR class="inquiry-hr" color='#1CB278'/>
      <div class="inquiry-container-other">
      <div class="inquiry-div">
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item>
            <el-tabs v-model="activeName" @tab-click="tabClick">
              <el-tab-pane label="按院校查询" name="first"></el-tab-pane>
              <el-tab-pane label="按专业查询" name="second"></el-tab-pane>
            </el-tabs>
            </el-menu-item>
        </el-menu>
      </div>
      <div class="header-container">
        <el-form
          v-show="activeIndex == 1"
          ref="form1"
          :model="form1"
          label-width="15px"
          class="query-container"
          :rules="rule1"
        >
          <el-form-item prop="inputSchool">
            <el-input
              v-model="form1.inputSchool"
              style="width: 450px"
              placeholder="请输入院校名称"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="info" plain style="background-color:#1CB278;color:white" @click="onSubmite('form1')">查询</el-button>
          </el-form-item>
        </el-form>

        <el-form
          v-show="activeIndex == 2"
          :rules="rule2"
          ref="form2"
          :model="form2"
          label-width="15px"
          class="query-container"
        >
          <el-form-item label="" prop="inputProfessional" class="margin-slot">
            <el-input
              v-model="form2.inputProfessional"
              style="width: 300px"
              placeholder="请输入专业名称"
            ></el-input>
          </el-form-item>

          
          <el-form-item prop="selectCity">
            <el-select
              v-model="form2.selectCity"
              style="width: 150px"
              placeholder="考生所在地"
            >
              <el-option v-for="(item, i) in provinceList"  :key="i" v-show="item.value !== 0" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="info" style="background-color:#1CB278;color:white" @click="onSubmite('form2')">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- <div class="header-tip">（ 注：本名单未包含港澳台地区高等学校 ）</div> -->
      </div>
      
      <div class="filter-container">
        <!-- 院校所在地 -->
        <div class="query-content">
          <div class="query-title">院校所在地</div>
          <div class="query-button">
            <el-radio-group v-model="province">
              <el-radio-button 
                class="query-slot"
                :label="item.value"  
                v-for="(item, index) in provinceList" 
                :key="index" 
              >
                {{item.name}}
              </el-radio-button>
            </el-radio-group>
          </div>
        </div> 
        <!-- 主管部门类别 -->
        <div class="query-content">
          <div class="query-title">主管部门类别</div>
          <div class="query-button">
            <el-radio-group v-model="department">
              <el-radio-button 
                class="query-slot"
                :label="item.value"  
                v-for="(item, index) in departmentList" 
                :key="index" 
              >
                {{item.name}}
              </el-radio-button>
            </el-radio-group>
          </div>
        </div> 

        <!-- 院校类型 -->
        <div class="query-content">
          <div class="query-title">院校类型</div>
          <div class="query-button">
            <el-radio-group v-model="schoolType">
              <el-radio-button 
                class="query-slot"
                :label="item.value"  
                v-for="(item, index) in schoolTypeList" 
                :key="index" 
              >
                {{item.name}}
              </el-radio-button>
            </el-radio-group>
          </div>
        </div> 
        <!-- 学历层次 -->
        <div class="query-content">
          <div class="query-title">学历层次</div>
          <div class="query-button">
            <el-radio-group v-model="eduLevel">
              <el-radio-button 
                class="query-slot"
                :label="item.value"  
                v-for="(item, index) in eduLevelList" 
                :key="index" 
              >
                {{item.name}}
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
        
        <div class="query-content">
          <div class="query-title">院校特性</div>
          <div class="query-button">
            <el-button class="query-slot" type="text">
              <el-checkbox v-model="checkedInfo.checkedSchool" label="5" style="margin-left:1px;margin-right:5px">一流大学建设高校 </el-checkbox>
              <el-checkbox v-model="checkedInfo.checkedProfessional" label="6" style="margin-left:5px;margin-right:5px">一流学科建设高校 </el-checkbox>
              <el-checkbox v-model="checkedInfo.graduateClass" label="7" style="margin-left:5px;margin-right:8px">研究生院<i class="el-icon-question" style="margin-left:5px"></i></el-checkbox>
              <el-radio-group v-model="checkedInfo.radio">
                <el-radio @click.native.prevent="radioClick(1)" :label="1" style="margin-left:5px;margin-right:8px">民办高校<i class="el-icon-question" style="margin-left:5px"></i></el-radio>
                <el-radio @click.native.prevent="radioClick(2)" :label="2" style="margin-left:5px;margin-right:8px">独立学院<i class="el-icon-question" style="margin-left:5px"></i></el-radio>
                <el-radio @click.native.prevent="radioClick(3)" :label="3" style="margin-left:5px;margin-right:8px">中外合作办学</el-radio>
                <el-radio @click.native.prevent="radioClick(4)" :label="4" style="margin-left:5px">内地与港澳台地区合作办学</el-radio>
              </el-radio-group>
            </el-button>
          </div>
          </div>
      </div>

      <div class="form-content">
        <router-view/>
      </div>
       
      </div>
  </div>
</template>

<script>
export default {
  data() {
     return {
      checkedInfo:{
        checkedSchool: false,
        checkedProfessional: false,
        graduateClass: false,
        radio: 0,
        validateFlag1: false,
        validateFlag2: false
      },
      
      activeIndex: 1,
      activeName: 'first',
      form1: {
        inputSchool: "",
      },
      form2: {
        inputProfessional: "",
        selectCity: ""
      },
      rule1: {
        inputSchool: [
          { required: true, message: '请输入院校名称'},
          { min: 2, message: '长度在 2 到 15 个字符之间'}
        ],
      },
      rule2: {
        inputProfessional: [
          { required: true, message: '请输入专业名称'},
          { min: 2, message: '长度在 3 到 15 个字符之间'}
        ],
        selectCity: [{ required: true, message: '请选择考生所在地'}]
      },
      // 院校所在地
      provinceList: [
        { 
          name: '全部', 
          value: 0,
          activeColor: true,
        },
        { 
          name: '北京', 
          value: 1,
          activeColor: false,
        },
        {
          name: '天津',
          value: 2,
          activeColor: false,
        },
        {
          name: '河北',
          value: 3,
          activeColor: false,
        },
        {
          name: '山西',
          value: 4,
          activeColor: false,
        },
        {
          name: '内蒙古',
          value: 5,
          activeColor: false,
        },
        {
          name: '辽宁',
          value: 6,
          activeColor: false,
        },
        {
          name: '吉林',
          value: 7,
          activeColor: false,
        },
        {
          name: '黑龙江',
          value: 8,
          activeColor: false,
        },
        {
          name: '上海',
          value: 9,
          activeColor: false,
        },
        {
          name: '江苏',
          value: 10,
          activeColor: false,
        },
        {
          name: '浙江',
          value: 11,
          activeColor: false,
        },
        {
          name: '安徽',
          value: 12,
          activeColor: false,
        },
        {
          name: '福建',
          value: 13,
          activeColor: false,
        },
        {
          name: '江西',
          value: 14,
          activeColor: false,
        },
        {
          name: '山东',
          value: 15,
          activeColor: false,
        },
        {
          name: '河南',
          value: 16,
          activeColor: false,
        },
        {
          name: '湖北',
          value: 17,
          activeColor: false,
        },
        {
          name: '湖南',
          value: 18,
          activeColor: false,
        },
        {
          name: '广东',
          value: 19,
          activeColor: false,
        },
        {
          name: '广西',
          value: 20,
          activeColor: false,
        },
        {
          name: '海南',
          value: 21,
          activeColor: false,
        },
        {
          name: '重庆',
          value: 22,
          activeColor: false,
        },
        {
          name: '四川',
          value: 23,
          activeColor: false,
        },
        {
          name: '贵州',
          value: 24,
          activeColor: false,
        },
        {
          name: '云南',
          value: 25,
          activeColor: false,
        },
        {
          name: '西藏',
          value: 26,
          activeColor: false,
        },
        {
          name: '陕西',
          value: 27,
          activeColor: false,
        },
        {
          name: '甘肃',
          value: 28,
          activeColor: false,
        },
        {
          name: '青海',
          value: 29,
          activeColor: false,
        },
        {
          name: '宁夏',
          value: 30,
          activeColor: false,
        },
        {
          name: '新疆',
          value: 31,
          activeColor: false,
        }
      ],
      // 主管部门类别
      departmentList: [
        {
          name: '全部',
          value: 0,
          activeColor: true,
        }, {
          name: '教育部',
          value: 1,
          activeColor: false,
        }, {
          name: '其他部委',
          value: 2,
          activeColor: false,
        }, {
          name: '地方',
          value: 3,
          activeColor: false,
        }, {
          name: '军校',
          value: 4,
          activeColor: false,
        },
      ],
      // 院校类型
      schoolTypeList: [
        { name: '全部', value: 0, activeColor: true, },
        { name: '综合', value: 1, activeColor: false, },
        { name: '工科', value: 2, activeColor: false, },
        { name: '农业', value: 3, activeColor: false, },
        { name: '林业', value: 4, activeColor: false, },
        { name: '医药', value: 5, activeColor: false, },
        { name: '师范', value: 6, activeColor: false, },
        { name: '语言', value: 7, activeColor: false, },
        { name: '财经', value: 8, activeColor: false, },
        { name: '政法', value: 9, activeColor: false, },
        { name: '体育', value: 10, activeColor: false, },
        { name: '艺术', value: 11, activeColor: false, },
        { name: '民族', value: 12, activeColor: false, }
      ],
      // 学历层次
      eduLevelList: [
        { name: '全部', value: 0, activeColor: true, },
        { name: '本科', value: 1, activeColor: false, },
        { name: '高职(专科)', value: 2, activeColor: false, },
      ],
      province: 0,
      department: 0,
      schoolType: 0,
      eduLevel: 0
    };
  },

  components: {},

  created() { },

  methods: {
    changeColor(cindex, index){
      let len = this.list[cindex].list.length
      console.log("len = ", len)
      for(let i = 0; i < len; i++){
        this.list[cindex].list[i].activeColor = false
      }
      let myList = this.list[cindex]
      let myListItem = myList.list[index].activeColor = true
    },

    tabClick(tab) {
      console.log(tab)
        if(tab.name == 'first'){ 
          this.activeName = 'first'
          this.activeIndex = 1
        }
        else {
          this.activeName = 'second'
          this.activeIndex = 2 
        }
    },

    // 实现单选框再次点击可以去掉被选中的样式
    radioClick (e) {
      e === this.checkedInfo.radio ? (this.checkedInfo.radio = ''):(this.checkedInfo.radio = e)
    },

    // 查询时进行再次校验
    onSubmite(formName){
      // if(this.activeIndex == 1){
      //   this.checkedInfo.validateFlag1 = !this.checkedInfo.validateFlag1
      //   console.log('this.checkedInfo.validateFlag1 = ',  this.checkedInfo.validateFlag1)
      //   console.log('this.checkedInfo.validateFlag2 = ',  this.checkedInfo.validateFlag2)
      //   this.$refs[formName].validate((valid) => {
      //       if (!valid) 
      //         return false;
      //       this.checkedInfo.validateFlag1 = !this.checkedInfo.validateFlag1
      //       console.log('this.checkedInfo.validateFlag1 = ',  this.checkedInfo.validateFlag1)
      //   });
      // }else{
      //     this.checkedInfo.validateFlag2 = !this.checkedInfo.validateFlag2
      //     console.log('this.checkedInfo.validateFlag2 = ',  this.checkedInfo.validateFlag2)
      //     this.$refs[formName].validate((valid) => {
      //       if (!valid) 
      //         return false;
      //       this.checkedInfo.validateFlag2 = !this.checkedInfo.validateFlag2
      //   });
      // }
      this.$refs[formName].validate((valid) => {
            if (!valid) 
              return false;
      })
    }
  }
}
</script>
<style lang="less">
.el-tabs__item{
  font-size:15px !important;
}
.el-tabs__item:hover{
  color: black;
}
.el-tabs__item.is-active {
  color: #1CB278;
}
.el-tabs__active-bar{
  background-color: #1CB278;
}

.el-button:focus,.el-button.is-active, .el-button:active{
    color: #1CB278;
}
.el-button:hover {
    color: #747774;
}


.inquiry-title{
  padding: 0 11%;
  font-size: 30px;
}

.query-button{
  margin-left: -30px;
}

.inquiry-hr{
  margin-top: 20px;
  margin-bottom: 8px;
  SIZE: 5
}
.inquiry-div{
  margin-left: -16px;
  margin-bottom: 20px;
  .el-tabs__nav-wrap::after {
    background-color: transparent;
  }
}

.inquiry-sch{
  margin-right: 10px;
  color: black
}

.inquiry-pro{
  margin-right: 10px;
  color: black
}

.inquiry-container-other {
  padding: 0 11%;
}

.header-container{
  margin-left: -15px;
}

.query-container {
  width: 500px;
  display: flex;
  justify-content: space-between;
}

.margin-slot {
  margin-left: 15px;
  margin-right: 10px
}

.header-tip {
  color: #c0c4cc;
  font-size: 14px;
}
.query-content {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  /* align-items: center; */
}
.query-title {
  display: flex;
  font-weight: bold;
  margin-right: 40px;
  width: 100px;
  padding-top: 12px;
}
.query-button {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}
.query-slot {
  // margin: 0 10px;
  color: #747774;
  &:first-child .el-radio-button__inner {
    border-left: none !important;
    border-radius: none !important;
  }
  .el-radio-button__inner {
    padding: 15px 10px;
    border: none;
    color: #747774;
    &:hover {
      color: none;
    } 
  }
  // .query-slot .el-radio-button__inner:hover
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #1CB278;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}

.query-slot-other{
   margin: 0 10px;
  color: #1CB278;
}
</style>